<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MFC表单验证DEMO By mechille</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/MaxFormChk.min.js"></script>

<!--下面的部分是演示扩展函数，如果不需要扩展可以不添加-->
<script type="text/javascript">
var ie = true;		//如果要用扩展表单验证的话，该属性一定要申明
function ex(){		//扩展函数名称，固定写法

	//密码匹配验证
	if($("#pwd1").val() != $("#pwd2").val()){
		$("#pwd2").callback("密码不匹配");		//当匹配不成功，pwd2表单 显示红色标注，并且TIP显示为“密码不匹配”
		return false;
	}
	//checkbox 验证，必须选择一个checkbox
	if($("[name='lover']:checked").length < 1){
		alert("必须得有一个lover!");
		return false;
	}

}
</script>
<!--上面的部分是演示扩展函数，如果不需要扩展可以不添加-->
<style type="text/css">
/*下面是弹出层的css*/
.pop {position:absolute; background:#000; color:#fff; font-size:11px; padding:6px 10px; border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; width:300px; display:block; z-index:5000; opacity:0.6;}
.pop .l1,.pop .l2,.pop .l3,.pop .l4		{width:1px; background:#000; float:right; display:block; overflow:hidden; position:absolute;}
.pop .con	{color:#fff;}
.pop .l4	{height:1px; left:-4px; top:10px;}
.pop .l3	{height:3px; left:-3px; top:9px;}
.pop .l2	{height:5px; left:-2px; top:8px;}
.pop .l1	{height:7px; left:-1px; top:7px;}
</style>
</head>

<body>
<h1>MaxFormChk表单验证DEMO</h1>
参与讨论：<a href="http://www.maxspeeds.com/post/190" target="_blank">http://www.maxspeeds.com/post/190</a>
<h3>FORM1表单验证</h3>
<form name="validateForm1" action="http://www.maxspeeds.com/" method="post">
<table border="0" align="top" cellpadding="5" cellspacing="1" bgcolor="#999999">
 　　<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px">
		用户名 : 
		</td>
		<td align="left">
		<input name="flightno" type="text" id="flightno" reg="^\w+$" tip="可以是英文或者数字"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE">
		中文姓名 : 
		</td>
		<td align="left">
		<input name="floatNum" type="text" id="floatNum" reg="^[\u4e00-\u9fa5]+$" tip="只允许中文字符"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE">
		电话号码 : 
		</td>
		<td align="left">
		<input name="str" type="text" id="str" reg="^\d{3}-\d{8}$|^\d{3}-\d{7}$|^\d{4}-\d{8}$|^\d{4}-\d{7}$" tip="国内电话号码，格式: 0832-87888822 或 021-87888822"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE">
		邮箱地址 : 
		</td>
		<td align="left">
		<input name="groupname" type="text" id="groupname" reg="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" tip="邮箱地址，如mechillehot@qq.com" />
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE">
		来自哪里 : 
		</td>
		<td align="left">
		<select id="from" name="from" reg="[^0]" tip="一定要选择哟">
		  <option value="0">－－请选择你来自哪里－－</option>
		  <option value="a">北京</option>
		  <option value="b">上海</option>
		  <option value="c">河北</option>
		</select> <span name="easyTip"></span>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
	<td colspan="2" align="left">
	<input type="submit" name="submit" value=" 提交 " id="submit" />
	</td>
	</tr>
</table>
</form>
<h3>FORM2表单验证</h3>
<form name="validateForm2" action="http://www.maxspeeds.com/" method="post">
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		网址 : 
		</td>
		<td align="left">
		<input name="time1" type="text" id="time1" reg="^(http|https|ftp)\://[a-zA-Z0-9\-\.]+\.[a-zA-Z]{2,3}(:[a-zA-Z0-9]*)?/?([a-zA-Z0-9\-\._\?\,\'/\\\+&%\$#\=~])*$" tip="URl格式，允许FTP,HTTP,HTTPS"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px">
		图片上传 : 
		</td>
		<td align="left">
		<input name="imgFile" type="file" id="imgFile" reg=".*gif|png|jpg$" tip="允许jpg,gif,png图片"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE">
		文本 : 
		</td>
		<td align="left">
		<textarea name="myeara" reg="^\w+$" tip="不能为空" cols="40" rows="5"></textarea>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
	<td colspan="2" align="left">
	<input type="submit" name="submit" value=" 提交 " id="submit" />
	</td>
	</tr>
</table>
</form>
<h3>扩展需求表单验证</h3>此处实例为【验证两个密码是否相等】和【至少选择一个复选框】，当然还有多个表单大小比较，复选框数量限制等等，看个人需要
<form name="pwdEqualForm" action="http://www.maxspeeds.com/" method="post">
<table border="0" cellpadding="5" cellspacing="1" bgcolor="#999999">
 　　<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
		密码 : 
		</td>
		<td align="left">
		<input name="u" type="password" id="pwd1" reg="^\w{6,20}$" tip="6-20个字符"/>
		</td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE" width="150px">
		确实密码: 
		</td>
		<td align="left">
		<input name="p" type="password" id="pwd2" reg="^\w{6,20}$" tip="6-20个字符，请确认两次密码输入相同"/> </td>
	</tr>
	<tr bgcolor="#ffffff">
		<td align="right" bgcolor="#EEEEEE">
		LOVERS: 
		</td>
		<td align="left">
		<input type="checkbox" name="lover" value="lilly" checked="checked" /> Lilly
		<input type="checkbox" name="lover" value="Han MeiMei" /> Han MeiMei
		<input type="checkbox" name="lover" value="Polly" /> Polly
		</td>
	</tr>
	<tr bgcolor="#ffffff">
	<td colspan="2" align="left" style="padding-left: 5px; padding-top: 4px; padding-bottom: 4px; padding-right: 18px;">
	<input type="submit" name="submit" value=" 提交 " id="submit" />
	</td>
	</tr>
</table>
</form>
</body>
</html>
